<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
        

            .h{
  position: fixed;
 
  width:150px ;
  height: 300px;
  background-color: aquamarine;
  left: 0;
  top: 400px;
}
        .d{
            margin: 0 500px;
        }
        .g {
            width: 100%;
            height: 300px;
            background-image: url(白切.webp);
            color: red;
            text-align: center
        }

            .div1{
                width: 700px;
                height: 400px;;
                background-image: url(白切.webp);
                color: red;
                text-align: center
            }
            * {
                margin: 0;
                padding: 0;
            }
    
            li {
                list-style-type: none;
                background: aquamarine;
            }
    
            a {
                text-decoration: none;
                font-size: 14px;
            }
                
            .nav {
                margin: 100px;
            }
    
            .nav>li {
                position: relative;
                float: left;
                width: 80px;
                height: 41px;
                text-align: center;
            }
    
            .nav li a {
                display: block;
                width: 100%;
                height: 100%;
                line-height: 41px;
                color: #333;
            }
    
            .nav>li>a:hover {
                background-color: #eee;
            }
    
            .nav ul {
                display: none;
                position: absolute;
                top: 41px;
                left: 0;
                width: 100%;
                border-left: 1px solid #FECC5B;
                border-right: 1px solid #FECC5B;
            }
    
            .nav ul li {
                border-bottom: 1px solid #FECC5B;
            }
    
            .nav ul li a:hover {
                background-color: #FFF5DA;
            } footer{
    background-color: #FECC5B;text-align: center


        </style>
    </head>
    
     <body background="白切.webp">

    
        <div class="g">
            白切鸡
        </div>  
        <header>
        <ul class="nav">
            <li>
                <a href="#">哈哈</a>
                <ul>
                    <li>
                        <a href="">哈</a>
                    </li>
                    <li>
                        <a href="">哈</a>
                    </li>
                    <li>
                        <a href="">哈</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">哈哈哈</a>
                <ul>
                    <li>
                        <a href="">哈</a>
                    </li>
                    <li>
                        <a href="">哈</a>
                    </li>
                    <li>
                        <a href="">哈</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">心灵坤汤</a>
                <ul>
                    <li>
                        <a href="">哈</a>
                    </li>
                    <li>
                        <a href="">哈</a>
                    </li>
                    <li>
                        <a href="">哈</a>
                    </li>
                </ul>
            </li>
        </ul>  <script>
    
            var ul = document.querySelector('.nav');
            var lis = ul.children;
    
          
            for (var i = 0; i < lis.length; i++) {
                lis[i].onmouseover = function () {
                    this.children[1].style.display = 'block'
                }
                lis[i].onmouseout = function () {
                    this.children[1].style.display = 'none'
                }
            }
        </script>
        </header>
        <div class="d"> <p>
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 </p>
    </div>
    <div class="h">
        <p>666</p>
        <p>666</p>
        <p>666</p>
        <p>666</p>
    </div>
    </main>
    <footer>haruharu
            <p>我喜欢kunkun</p>
        </footer>
    
        </body>

<html>
